// Vue 组件
Vue.component("upload",{
    // 组件属性
    props:["url", "disable-click"],
    // 组件数据模型
    data(){
        return {
            webPath:""
        }
    },
    // 必须是单根节点
    template:`
    <span @click=" if(disableClick != undefined) return;  $refs.file.click()"
            @paste="pasteFile($event)">
        <slot></slot>
        <input @change="upload" type="file" ref="file" style="display: none">
    </span>
    `,
    methods:{
        upload(){
            if(this.$refs.file.files.length == 0){
                return;
            }
            let fd = new FormData();
            fd.append("file", this.$refs.file.files[0]);
            axios.post(this.url, fd).then(res=>{
                if(res.data.code){
                    this.webPath = res.data.data;
                    // 自定组件事件, 发布事件
                    this.$emit("uploaded", this.webPath);
                }
            });
        },
        pasteFile(e){
            var clipboard = e.clipboardData;
            if (clipboard.items[0].type.match(/image/)) {
                let fd = new FormData();
                let blob = clipboard.items[0].getAsFile();
                let nm = "image.jpg"
                fd.append("file",blob,nm);
                axios.post(this.url, fd).then(res=>{
                    if(res.data.code){
                        this.webPath = res.data.data;
                        // 自定组件事件, 发布事件
                        this.$emit("uploaded", this.webPath);
                    }
                });
            }
        }
    }

});
// <upload url="...." @uploaded="fn"> <img> or <button>  </upload>
// var v = new Vue({
//     el : ""
// data:{}
//
// })